<template>
  <div>
    <div class="block">
      <el-avatar :size="50" :src="circleUrl"></el-avatar>
    </div>
    <div style="margin: 15px">
      <span>{{ this.$store.state.acc }}</span>
    </div>
    <div id="editButton">
      <el-button class="add-button" size="medium" @click="dialogFormVisible = true">编辑头像</el-button>
    </div>
    <el-dialog
      title="编辑用户头像"
      :visible.sync="dialogFormVisible"
      @close="clear"
      width="30%"
      center>
      <el-form style="text-align: left">
        <el-form-item label="图片" :label-width="formLabelWidth" prop="cover">
          <el-input v-model="cover" autocomplete="off" placeholder="图片 URL"></el-input>
          <img-upload @onUpload="uploadImg" ref="imgUpload"></img-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import ImgUpload from './ImgUpload'

export default {
  name: 'StudentImag',
  components: {ImgUpload},
  data () {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      cover: '',
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  methods: {
    editImg () {
    },
    clear () {
      this.$refs.imgUpload.clear()
      Object.assign(this.$data, this.$options.data.call(this))
    },
    uploadImg () {
      this.form.cover = this.$refs.imgUpload.url
    }
  }
}
</script>

<style scoped>
#editButton {
  margin: 20px;
}
</style>
